<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>修改需求</title>
		<link rel="stylesheet" type="text/css" href="../css/head_style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/foot_style.css"/>
		<link rel="stylesheet" href="../js/layui-v2.2.6/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/fontCss.css"/>
		<link rel="stylesheet" type="text/css" href="../css/left_style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/modify.css"/>
		<script src="../js/layui-v2.2.6/layui/layui.js"></script>
	</head>
	<body>
		<!--头部-->
		<div class="head">
			<div class="head1 ">
				<img class="img" src="../img/top1.png" alt="汇网" width="50" height="50"/>
				<div class="head-search layui-form">
					<i class="layui-icon layui-icon-face-smile search-icon">&#xe615;</i> 
				 <div class="layui-input-inline head-search-input">
			        <select name="modules" lay-verify="required" lay-search="">
			          <option value="">寻找人才</option>
			          <option value="1">人才1号</option>
			        </select>
			     </div>
				</div>
				
				<div class="layui-btn layui-btn-sm fabu-btn">发&nbsp;&nbsp;布</div>
				<div class="btns">
					<span class="language-btns" >
						中文
						<i class="layui-icon layui-icon-face-smile language-icon">&#xe61a;</i>
					&nbsp;&nbsp;&nbsp;
						<div class="span-div">
							<p class="cn">中文</p>
								<hr/>
								<p class="eng">English</p>
						</div>
					</span>
					<span>&nbsp;&nbsp;&nbsp;</span>
					<div class="img-userhead">
						<img src="../img/1/10.png" width="32" height="32" style="border-radius: 16px;;"><!--头像-->
						<!--<span class="login-btn">登录</span>
						<span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
						<span class="register-btn">注册</span>-->
						<span class="user-btn">Manty
							<i class="layui-icon layui-icon-face-smile user-icon" style="font-size: 14px;">&#xe61a;</i>
						</span>
						<div class="userbox">
							<div class="userbox-user">
								<img src="../img/1/10.png"/>
								<span class="userbox-usename">Manty</span>
								<span class="userbox-usertype">个人用户</span>
							</div>
							<div class="userbox-set">
								<i class="iconfont " style="font-size: 14px;color: #333333;">&#xe606;</i>
								&nbsp;&nbsp;&nbsp;设置
							</div>
							<div class="userbox-out">
								<i class="iconfont " style="font-size: 14px;color: #333333;">&#xe652;</i>
								&nbsp;&nbsp;&nbsp;安全退出
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--导航-->
		<div class="nav">
			<div class="nav1">
				<ul>
					<li>首&nbsp;&nbsp;&nbsp;&nbsp;页</li>
					<li>供需大厅</li>
					<li>产品说明</li>
					<li>关于我们</li>
					<li>帮助中心</li>
				</ul>
			</div>
		</div>
		<!--内容-->
		<div class="content">
			<div class="contentbox">
				<div class="left-nav">
					<div class="left-userhead">
						<img src="../img/1/10.png"/>
					</div>
					<div class="left-username">
						Manty
					</div>
					<!--发布需求-->
					<div class="left-demand left-btn-style" style="margin-top:20px ;">
						<i class="iconfont">&#xe75e;</i>
						<span class="">发布需求</span>
					</div>
					<!--发布历史-->
					<div class="left-history left-btn-style">
						<i class="iconfont">&#xe75f;</i>
						<span class="">发布历史</span>
					</div>
					<!--交易记录-->
					<div class="left-record left-btn-style">
						<i class="iconfont">&#xe762;</i>
						<span class="">交易记录</span>
					</div>
					<!--我的资料-->
					<div class="left-data left-btn-style">
						<i class="iconfont">&#xe760;</i>
						<span class="">我的资料</span>
					</div>
					<!--修改密码-->
					<div class="left-password left-btn-style">
						<i class="iconfont">&#xe762;</i>
						<span class="">修改密码</span>
					</div>
					<!--签到-->
					<div class="left-sign">
						<span class="left-sign-span">已连续签到2天</span>
						<div class="left-sign-btn">签到</div>
					</div>
				</div>
				<div class="contentbox-right">
					<div class="contentbox-body-title">
						修改需求
					</div>
					<div class="contentbox-body">
						<div class="body-choose-title">
							选择想要提供的业务
						</div>
						<div class="body-choose-list">
							<div class="body-choose-list-choose1">
								我有才能可以帮助外国人
							</div>
							<span class="">
								或
							</span>
							<div class="body-choose-list-choose2">
								我要找国际人才或资源
							</div>
						</div>
						<div class="body-tag">
							<div class="body-line-style">
								
								<span class="body-line-style-span">您寻找的才能（最多添加八项）</span>
							</div>
							<div class="body-tag-content">
								<span class="body-tag-content-list" >
									<span class="">
										钢琴
										<i class="iconfont span-i body-tag-ibtn">&#xe638;</i>
									</span>
									<span class="">
										JAVA开发
										<i class="iconfont span-i body-tag-ibtn">&#xe638;</i>
									</span>
									<span class="">
										LOGO设计
										<i class="iconfont span-i body-tag-ibtn">&#xe638;</i>
									</span>
									
									
								</span>
								<span class="body-tag-content-btn" >
									<i class="iconfont span-add">&#xe601;</i>
									添加才能
								</span>
							</div>
						</div>
						<div class="body-DeTitle">
							<div class="body-line-style">
								<span class="body-line-style-span">需求标题(30字)</span>
							</div>
							<div class="layui-form">
								<input class="layui-input body-DeTitle-input" type="text" name="title"   placeholder="请输入标题"  >    
							</div>
						</div>
						<div class="body-DeContent">
							<div class="body-line-style">
								<span class="body-line-style-span">详细补充需求内容</span>
							</div>
							<div class="layui-form">
								<textarea name=""   placeholder="请输入内容" class="layui-textarea body-DeContent-textarea" ></textarea>
							</div>
						</div>
						<!--邮箱电话网站公众号-->
						<div class="body-epsp">
							<div class="body-epsp-ep">
								<div class="body-epsp-ep-email">
									<div class="body-line-style">
										<span class="body-line-style-dot"></span>&nbsp;&nbsp;
										<span class="body-line-style-span">邮箱</span>
									</div>
									<div class="layui-form">
										<input class="layui-input body-epsp-ep-email-input" type="text" name="title"   placeholder="请输入邮箱"  >
									</div>
								</div>
								<div class="body-epsp-ep-phone">
									<div class="body-line-style">
										<span class="body-line-style-dot"></span>&nbsp;&nbsp;
										<span class="body-line-style-span">电话</span>
									</div>
									<div class="layui-form">
										<input class="layui-input body-epsp-ep-phone-input" type="text" name="title"   placeholder="请输入手机号"  >
									</div>
								</div>
							</div>
							<div class="body-epsp-sp">
								<div class="body-epsp-sp-site">
									<div class="body-line-style">
										<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
										<span class="body-line-style-span">网站</span>
									</div>
									<div class="layui-form">
										<input class="layui-input body-epsp-ep-site-input" type="text" name="title"   placeholder="请输入网站地址"  >
									</div>
								</div>
								<div class="body-epsp-sp-public">
									<div class="body-line-style">
										<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
										<span class="body-line-style-span">公众号</span>
									</div>
									<div class="layui-form">
										<input class="layui-input body-epsp-sp-public-input" type="text" name="title"   placeholder="请输入公众号"  >
									</div>
								</div>
							</div>
						</div>
						<div class="body-details">
							<div class="body-details-img">
								<p>点击上传<br/>我的微信二维码</p>
								<img class="body-details-ewm"  />
							</div>
							<div class="body-details-list">
								<div class="body-details-vf">
									<div class="body-details-vf-vx">
										<div class="body-line-style">
											<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
											<span class="body-line-style-span">微信</span>
										</div>
										<div class="layui-form">
											<input class="layui-input body-details-vf-vx-input" type="text" name="title"   placeholder="请输入微信号或者绑定的手机号"  >
										</div>
									</div>
									<div class="body-details-vf-facebook">
										<div class="body-line-style">
											<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
											<span class="body-line-style-span">Facebook</span>
										</div>
										<div class="layui-form">
											<input class="layui-input body-details-vf-facebook-input" type="text" name="title"   placeholder="请输入Facebook帐号"  >
										</div>
									</div>
								</div>
								<div class="body-details-wl">
									<div class="body-details-wl-wapp">
										<div class="body-line-style">
											<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
											<span class="body-line-style-span">WhatsApp</span>
										</div>
										<div class="layui-form">
											<input class="layui-input body-details-wl-wapp-input" type="text" name="title"   placeholder="请输入WhatsApp"  >
										</div>
									</div>
									<div class="body-details-wl-lin">
										<div class="body-line-style">
											<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
											<span class="body-line-style-span">LinkedIn</span>
										</div>
										<div class="layui-form">
											<input class="layui-input body-details-wl-lin-input" type="text" name="title"   placeholder="请输入LinkedIn"  >
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="body-ComMethods">
							<div class="body-line-style">
								<!--<span class="body-line-style-dot"></span>&nbsp;&nbsp;-->
								<span class="body-line-style-span">其他即时通讯方式（例，QQ：1652669536）</span>
							</div>
							<div class="body-ComMethods-com">
								<i class="iconfont body-ComMethods-com-addbtn">&#xe601;</i>
								<div class="layui-form body-ComMethods-com-box">
									<input class="layui-input body-ComMethods-com-name" type="text" name="title"   placeholder="请填写即时通信种类"  >
									<span class="body-ComMethods-com-span">:</span>
									<input class="layui-input body-ComMethods-com-content" type="text" name="title"   placeholder="请填写该通信方式的账号"  >
									
								</div>
							</div>
						</div>
						<div class="body-userAgreement">
							<div class="layui-form">
								<input name="agreement"  type="radio"  value="nan" title="同意用户电子协议">
							</div>
							
						</div>
						<div class="body-SaveBtn">
							<div class="body-SaveBtn-btn">
								确定修改
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot1">
				Copyright © 2018 世界汇网  www.thewiorldwie.cn
			</div>
		</div>
	</body>
	<script>
	layui.use(['form', 'layedit', 'laydate','upload'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit
	  ,laydate = layui.laydate
	  ,$ = layui.jquery
	  ,upload = layui.upload;
		
		 $(".language-btns").click(function(){
                if(!$(".span-div").is(':hidden')){//如果当前不隐藏
                    $('.span-div').hide();//就隐藏div
                    $(".language-icon").html("&#xe61a;")
                }else{//否则
					$('.userbox').hide();//就隐藏div
					$(".user-icon").html("&#xe61a;")
                    $('.span-div').show();//那么就显示div
                    $(".language-icon").html("&#xe619;")
                }
            })

            $(".user-btn").click(function(){
                if(!$(".userbox").is(':hidden')){//如果当前不隐藏
                    $('.userbox').hide();//就隐藏div
                    $(".user-icon").html("&#xe61a;")
                }else{//否则
 					$('.span-div').hide();//就隐藏div
 					$(".language-icon").html("&#xe61a;")
                    $('.userbox').show();//那么就显示div
                    $(".user-icon").html("&#xe619;")
                }
            });
		
		$(document).on("click",".body-tag-ibtn",function(e){
			var target = $(e.target);
			var parent = target.parent()
			parent.remove()
			
			var list = $(".body-tag-content-list span")
			if(list.length==4){
				$(".body-tag-content-btn").css("margin-top","0px");
				$(".body-tag-content-btn").css("margin-left","15px");
			}
			if(list.length==5){
				$(".body-tag-content-btn").css("margin-left","0px");
			}
		})
		
		//添加才能
		$(document).on("click",".body-tag-content-btn",function(e){
			//询问框
			layer.open({
				title:'请添加一个才能(仅模拟测试)',
				type: 1,
				skin: 'layui-layer-rim', //加上边框
				area: ['360px', '120px'], //宽高
				content: '<div class="layer-from"><input type="text" name="line3-value"  placeholder="点击输入8个字以内" " class="layui-input  line3-label"/></div><div class="layui-btn add-btn" style="width: 100px;float: right">确定</div>'
			});
			
		})
		
		//添加才能
		$(document).on("click",".add-btn",function(e){
			var list = $(".body-tag-content-list span")
			if( list.length<8){
				var value=$("input[type=text][name=line3-value]").val();
				$(".body-tag-content-list ").append('<span class="">'+value+'<i class="iconfont span-i body-tag-ibtn">&#xe638;</i></span>')
				layer.closeAll();
			}else{
				layer.closeAll();
				layer.msg("你添加的才能已经上限")
			}
			if(list.length==4){
				
				$(".body-tag-content-btn").css("margin-top","20px");
				$(".body-tag-content-btn").css("margin-left","0px");
			}else{
				
				$(".body-tag-content-btn").css("margin-left","15px");
			}
			
		})
		
		
		$(document).on("click",".body-ComMethods-com-addbtn",function(e){
			var target = $(e.target);
			var parent = target.parent()
			var ch = parent.children("div").first()
//			alert(ch.target)
			parent.append('<div class="layui-form body-ComMethods-com-box">'+ch.html()+'</div>')
		})
		
			//普通图片上传
	  var uploadInst = upload.render({
	    elem: '.body-details-img' //操作对象
	    ,url: '/test/xxx'	//上传路径
	    ,method: 'POST'	 	//上传的方法
	    ,auto:false			//自动上传否？
	    ,bindAction:'.body-SaveBtn-btn'		//开启上传的按钮
	    ,choose: function(obj){				//选择文件之后
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $(".body-details-ewm").attr("src",result);
	      });
	    }
	    ,done: function(res){		//上传成功的回调
		  	//如果上传失败
			//    if(res.code > 0){
			//      return layer.msg('上传失败');
			//    }
		  	//上传成功
	    }
	    ,error: function(){			//上传失败的回调
	      	//演示失败状态，并实现重传
			//    var demoText = $('#demoText');
			//    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			//    demoText.find('.demo-reload').on('click', function(){
			//      uploadInst.upload();
			//    });
	    }
	  });

		
})
  	</script>
</html>
